<template>
  <div :class="$style.page">
    <el-tooltip :content="visible ? '隐藏' : '显示'">
      <el-button
        type="primary"
        :icon="visible ? View : Hide"
        circle
        @click="visible = !visible"
      ></el-button>
    </el-tooltip>
    <transition name="el-zoom-in-top">
      <div v-show="visible" class="transition-box">
        <el-form label-width="0.4rem">
          <el-form-item label="省市区">
            <z-select
              v-model="options.province"
              :list="province"
              value-key="code"
              :value-on-clear="0"
              :empty-values="[0]"
              @change="onProvinceChange"
            ></z-select>
          </el-form-item>
          <el-form-item label="地级市">
            <z-select
              v-model="options.city"
              :list="city"
              value-key="code"
              :value-on-clear="0"
              :empty-values="[0]"
              @change="onCityChange"
            ></z-select>
          </el-form-item>
          <el-form-item label="区县">
            <z-select
              v-model="options.district"
              :list="district"
              value-key="code"
              :value-on-clear="0"
              :empty-values="[0]"
              @change="onDistrictChange"
            ></z-select>
          </el-form-item>
          <!-- <el-form-item label="街道">
              <z-select
                v-model="options.street"
                :list="street"
                value-key="code"
                :value-on-clear="0"
                :empty-values="[0]"
                @change="onStreetChange"
              ></z-select>
            </el-form-item> -->

          <el-form-item label="下载方式">
            <el-radio-group v-model="options.downloadWay">
              <el-radio label="单文件（按地域名称命名）" value="name"></el-radio>
              <el-radio label="单文件（按地域行政编码命名）" value="code"></el-radio>
              <el-radio label="下载所有文件" value="all"></el-radio>
              <el-radio label="全国省市区县乡村名称和编码" value="area"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onDownload">下载 geoJson </el-button>

            <el-button type="primary" @click="onGetWeather">获取当前地区天气</el-button>

            <el-button type="primary" @click="onGeolocation">定位</el-button>
          </el-form-item>
        </el-form>

        <div :class="$style.weather" v-if="currentWeather.city">
          <div :class="$style.item">
            <el-button> 城市/区： {{ currentWeather.city }}</el-button>
            <el-button> 天气： {{ currentWeather.weather }}</el-button>
            <el-button> 温度： {{ currentWeather.temperature }}°C</el-button>
            <el-button> 湿度： {{ currentWeather.humidity }}%</el-button>
            <el-button> 风向： {{ currentWeather.windDirection }}</el-button>
            <el-button> 风速： {{ currentWeather.windPower }}</el-button>
            <el-button> 发布时间： {{ currentWeather.reportTime }}</el-button>
          </div>

          <div :class="$style.item" class="mt-xs">
            <el-button v-for="item in weatherList">
              {{ item.date }} {{ item.dayWeather }} {{ item.dayTemp }}~{{
                item.nightTemp
              }}°C</el-button
            >
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { View, Hide } from '@element-plus/icons-vue'

const props = defineProps<{
  province: AnyObject[]
  city: AnyObject[]
  district: AnyObject[]
  street: AnyObject[]
}>()

const options = defineModel({
  default: {
    province: 0,
    city: 0,
    district: 0,
    street: 0,
    downloadWay: ''
  }
})

const visible = ref(true)

const emits = defineEmits<{
  download: [e: typeof options.value]
  change: [e: typeof options.value]
}>()

const onProvinceChange = () => {
  options.value.city = 0
  options.value.district = 0
  options.value.street = 0
  emits('change', options.value)
}

const onCityChange = () => {
  options.value.district = 0
  options.value.street = 0
  emits('change', options.value)
}

const onDistrictChange = () => {
  options.value.street = 0
  emits('change', options.value)
}

// const onStreetChange = () => {
//   emits('change', options.value)
// }

const getCurrentAreaname = () => {
  const { province, city, district, street } = options.value

  if (province) {
    if (!city) return props.province.find(item => item.code == province)?.name
    if (!district) return props.city.find(item => item.code == city)?.name
    if (!street) return props.district.find(item => item.code == district)?.name
    return props.street.find(item => item.code == street)?.name
  }
  return '深圳市'
}

import type { WeatherInfo, FutureWeather } from './type'
// 当前地区天气
const currentWeather = ref<Partial<WeatherInfo>>({})
// 当前地区未来天气
const weatherList = ref<FutureWeather['forecasts']>([])

// 获取当前天气
const onGetWeather = () => {
  // @ts-ignore
  const AMap = window.AMap
  const weather = new AMap.Weather()
  const areaName = getCurrentAreaname()

  // 查询实时天气信息
  weather.getLive(areaName, (err: any, data: WeatherInfo) => {
    if (!err) {
      currentWeather.value = data
    } else {
      currentWeather.value = {}
    }
  })
  // 未来 4 天
  weather.getForecast(areaName, (err: any, data: FutureWeather) => {
    if (!err) {
      weatherList.value = data.forecasts
    } else {
      weatherList.value = []
    }
  })
}

// 定位
const onGeolocation = () => {
  // @ts-ignore
  const geolocation = window.__GEO_LOCATION__

  geolocation.getCurrentPosition()
}

const onDownload = () => {
  emits('download', options.value)
}
</script>

<style lang="scss" module>
@use './style.scss';
</style>
